
.chatmessage {
    padding: 5px 5px 5px 5px;
  }
  .sender {
    clear: both;
  }
  .sender div:nth-of-type(1) {
    float: left;
  }
  .sender div:nth-of-type(2) {
    background-color: #cccccc;
    float: left;
    margin: 0 20px 10px 15px;
    padding: 5px 10px 5px 0px;
    max-width: 420px;
    border-radius: 7px;
  }
  
  .receiver div:first-child img,
  .sender div:first-child img {
    width: 35px;
    height: 35px;
  }
  
  .receiver {
    clear: both;
  }
  .receiver div:nth-child(1) {
    float: right;
  }
  .receiver div:nth-of-type(2) {
    float: right;
    background-color: #dddddd;
    margin: 0 10px 10px 20px;
    padding: 5px 0px 5px 10px;
    max-width: 420px;
    border-radius: 7px;
  }
  
  .left_triangle {
    height: 0px;
    width: 0px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent #cccccc transparent transparent;
    position: relative;
    left: -16px;
    top: 3px;
  }
  
  .right_triangle {
    height: 0px;
    width: 0px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #dddddd;
    position: relative;
    right: -16px;
    top: 3px;
  }